<script setup>
import { useVueFlow } from '@vue-flow/core';
import VueFlow from './VueFlow.vue';
import DocumentBar from './document/DocumentBar.vue';
import Sidebar from './drag/Sidebar.vue';
import useDragAndDrop from './drag/useDnD';

const { toObject } = useVueFlow()

const { onDrop } = useDragAndDrop()

const vueFlowRef = ref(null)
const vueFlowTabs = ref(0)
const flowKey = 'vueflow_1'
const key = ref(0)
const flowData = ref('')
const controlsShow = ref(true)
const showEL = ref(false)

onMounted(() => {
  
})

watch(vueFlowTabs, (val)=>{
  showEL.value = false
  flowData.value = ''
  if(val == 1){//文档
    onSave();
    controlsShow.value = false
    showEL.value = true
  }else{//流程
    onRestore();
    controlsShow.value = true
    showEL.value = true
  }
  key.value++
})

const initFlowData = (data) => {
  flowData.value = JSON.stringify(data)
  showEL.value = true
  key.value++
  if (vueFlowRef.value) {
    vueFlowRef.value.toEL();
  }
}

function onSave() {
  localStorage.setItem(flowKey, JSON.stringify(toObject()))
}

function onRestore() {
  flowData.value = localStorage.getItem(flowKey)
}
</script>

<template>
  <div class="layout-flow dndflow">
    <vs-row style="block-size: 100%;">
      <vs-col :sm="2">
        <vs-tabs v-model="vueFlowTabs" class="ivy-vs-table-vue-flow" alignment="fixed" :hover-line="true">
          <vs-tab label="流程" class="ivy-vs-table-vue-flow">
            <Sidebar  @drop="onDrop"/>
          </vs-tab>
          <vs-tab label="文档" class="ivy-vs-table-vue-flow">
            <DocumentBar @initFlowData="initFlowData"/>
          </vs-tab>
        </vs-tabs>
      </vs-col>
      <vs-col :sm="10">
        <VueFlow ref="vueFlowRef" :key="key" :flowData="flowData" :showEL="showEL"></VueFlow>
      </vs-col>
    </vs-row>
    
  </div>
</template>

<style>
@import '@vue-flow/core/dist/style.css';
@import "@vue-flow/core/dist/theme-default.css";
@import "@vue-flow/controls/dist/style.css";
@import "@vue-flow/minimap/dist/style.css";
@import "@vue-flow/node-resizer/dist/style.css";


.vue-flow__minimap {
  transform: scale(75%);
  transform-origin: bottom right;
}



.layout-flow {
  block-size: 100%;
  inline-size: 100%;
}

.process-panel,.common-panel,
.layout-panel {
  display: flex;
  gap: 10px;
}

.process-panel,.common-panel {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 8px;
  background-color: #2d3748;
  box-shadow: 0 0 10px rgba(0, 0, 0, 50%);
  inline-size: min-content;
  inset-inline-end: 36px !important;
}

.process-panel button,.common-panel button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background-color: #4a5568;
  block-size: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 50%);
  color: white;
  cursor: pointer;
  font-size: 16px;
  inline-size: 40px;
}


.process-panel button:hover,.common-panel button:hover,
.layout-panel button:hover
{
  background-color: #2563eb;
  transition: background-color 0.2s;
}

.process-panel label,.common-panel label {
  color: white;
  font-size: 12px;
}

.checkbox-panel {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stop-btn svg {
  display: none;
}

.stop-btn:hover svg {
  display: block;
}

.stop-btn:hover .spinner {
  display: none;
}

.layout-wrapper-ivy{
  block-size: 100%;
}

.spinner {
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  block-size: 10px;
  border-block-start: 3px solid #2563eb;
  inline-size: 10px;
}

.spinner2 {
  animation: spin 1s linear infinite;
  block-size: 10px;
  font-size: 16px;
  inline-size: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.dnd-flow {
  display:flex;
  flex-direction:column;
  block-size:100%;
  block-size: calc(100vh - 11rem);
  inline-size: 100%;
}

.dnd-flow aside {
  background:#10b981bf;
  border-inline-end:1px solid #eee;
  box-shadow:0 5px 10px 0 rgba(0,0,0,30%);
  box-shadow:0 5px 10px #0000004d;
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding-block:15px;
  padding-inline:10px
}

.dnd-flow aside .nodes>* {
  box-shadow:5px 5px 10px 2px rgba(0,0,0,25%);
  box-shadow:5px 5px 10px 2px #00000040;
  cursor:grab;
  font-weight:500;
  margin-block-end:10px
}

.dnd-flow aside .description {
  margin-block-end:10px
}

.dnd-flow .vue-flow-wrapper {
  flex-grow:1;
  block-size:100%
}

@media screen and (min-width: 640px) {
  .dnd-flow {
    flex-direction:row
  }

  .dnd-flow aside {
    min-inline-size:25%
  }


}

@media screen and (max-width: 639px) {
  .dnd-flow aside .nodes {
    display:flex;
    flex-direction:row;
    gap:5px
  }


}

.dropzone-background {
  position:relative;
  block-size:100%;
  inline-size:100%
}

.dropzone-background .overlay {
  position:absolute;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  block-size:100%;
  inline-size:100%;
  inset-block-start:0;
  inset-inline-start:0;
  pointer-events:none
}

.ivy-vs-table-vue-flow .con-ul-tabs .ul-tabs .vs-tabs--li button{
  z-index: 0 !important;
}
</style>
